<div class="radio" p-as="group">
    <div p-each="selects">
        <label class="radioLabel">
            <div class="radioButton">
                <span></span>
            </div>
            <span>{{content}}</span>
            <input type="radio" class="hidden p-radio" p-bind="name:{{@group.name}} ^ value:{{value}}">
        </label>
    </div>
</div>

<style>
    .radioButton {
        width: 14px;
        height: 14px;
        line-height: 14px;
        border: 1px solid rgb(92, 117, 91);
        border-radius: 50%;
        display: inline-block;
        text-align: center;
    }
    
    .radioButton>span {
        width: 10px;
        height: 10px;
        background-color: rgb(92, 117, 91);
        border-radius: 50%;
        display: inline-block;
        margin-bottom: 1px;
        opacity: 0;
        transition: all .1s;
        transform: scale(0);
    }
    
    .radioButton.checked>span {
        opacity: 1;
        transform: scale(1);
    }
    
    .hidden {
        display: none;
    }
</style>

<script>
    $(document).on('change modelChange', '.p-radio', function(e) {
        if ($(this).prop('checked')) {
            var button = $(this).siblings('.radioButton');
            if (!button.hasClass('checked')) {
                button.addClass('checked');
                $(this).parent().siblings().children('.radioButton').removeClass('checked');
            }
        }
    })
</script>